<template>
  <div class="container">
    <div class="title">
      <hr class="hr" />
      <div class="title-text">宝典荣誉</div>
    </div>
    <div class="title-des">
      <div>强大的驾考功能，优秀的用户体验，我们的愿景是学车无忧，轻松拿本</div>
    </div>
    <div class="pic">
      <div><img :src="pic4" alt="" /></div>
    </div>
  </div>
</template>

<script setup>
import pic4 from "../assets/pic4.png";
</script>

<style scoped>
.container {
  margin-bottom: 100px;
}

.pic {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.title-des {
  width: 100%;
  margin-bottom: 40px;
}

.title-des div {
  width: fit-content;
  margin: 0 auto;
  color: rgb(98, 97, 97);
}

.hr {
  width: 90%;
  height: 2px;
  border: none;
  border-top: 1px dotted #e9e9e9;
}

.title {
  text-align: center;
  position: relative;
  width: 100%;
  display: inline-block;
  margin-top: -20px;
  line-height: 41px;
  padding: 0 45px;
  background-color: #fff;
  font-size: 30px;
  margin-bottom: 50px;
}

.title-text {
  width: fit-content;
  position: absolute;
  left: 0;
  right: 0;
  top: -20px;
  margin-left: auto;
  margin-right: auto;
  background-color: white;
}
</style>
